<template>
  <view class="page-body">
    <div class="list">
      <div class="item" v-for="(item, i) in list" :key="i">
        <div class="flex" v-if="item.type == 'ai'">
          <image :src="item.avatar_url" class="user-head u-m-r-20"></image>
          <div class="content flex-w-1">
            <div class="user-nickname flex">
              <div>{{ item.nickname }}</div>
            </div>
            <div class="content-value flex">
              <div class="text-value">
                {{ item.text }}
              </div>
            </div>
            <div
              @click="copy(item.text)"
              class="u-m-t-14 color-999 flex-y-center u-font-24"
            >
              <div class="iconfont icon-template-fill color-main"></div>
              <div>复制回答</div>
            </div>
          </div>
        </div>
        <div class="flex-x-end" v-else>
          <div class="content flex-w-1">
            <div class="user-nickname flex-x-end">
              <div>{{ item.nickname }}</div>
            </div>
            <div class="content-value flex-x-end">
              <div class="text-value text-value-1">
                {{ item.text }}
              </div>
            </div>
          </div>
          <image :src="item.avatar_url" class="user-head u-m-l-20"></image>
        </div>
      </div>
    </div>

    <div class="bottom-icon-list">
      <div class="fixed">
        <div class="item" @click="$utils.toUrl('/chart-gpt/task/task')">
          <image
            :src="asyncImgs.chart_gpt.nav_qiandao"
            mode="aspectFill"
          ></image>
          免费领次数
        </div>
        <div @click="$utils.toUrl('/chart-gpt/pay/pay')" class="item">
          <image :src="asyncImgs.chart_gpt.nav_gouwu" mode="aspectFill"></image>
          购买{{stores.integral_name}}
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="fixed flex-y-center">
        <div class="flex-w-1">
          <u-input
            @confirm="submit"
            v-model="value"
            placeholder="请输入您的问题..."
          ></u-input>
        </div>
        <div @click="submit" class="submit">发送</div>
      </div>
    </div>
  </view>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      value: '',
    };
  },
  onLoad(params) {
    if (params.value.length) {
      this.value = params.value;
      this.submit();
    }
  },
  onShow() {},
  methods: {
    async submit() {
      uni.showLoading({
        title: '正在思考中...',
        mask: true,
      });
      let value = JSON.parse(JSON.stringify(this.value));
      this.value = this.$options.data().value;
      try {
        const res = await this.$allrequest.chart.questionTemplateQuestion(
          {
            question: value,
          },
          false
        );

        this.list.push(
          {
            text: value,
            type: 'user',
            time: this.$utils.formatDate(new Date()),
            nickname: this.userInfo.nickname,
            avatar_url: this.userInfo.avatar_url,
          },
          {
            type: 'ai',
            ...res.data,
            nickname: '小助手',
            avatar_url: this.asyncImgs.chart_gpt.jiqiren_head,
          }
        );
      } catch (error) {
        this.list.push(
          {
            text: value,
            type: 'user',
            time: this.$utils.formatDate(new Date()),
            nickname: this.userInfo.nickname,
            avatar_url: this.userInfo.avatar_url,
          },
          {
            type: 'ai',
            text: JSON.stringify(error || '小助手出错了。'),
            time: this.$utils.formatDate(new Date()),
            nickname: '小助手',
            avatar_url: this.asyncImgs.chart_gpt.jiqiren_head,
          }
        );
      }

      uni.hideLoading({});

      this.$nextTick(() => {
        uni.pageScrollTo({
          scrollTop: 1000 * this.list.length,
        });
      });
    },
    copy(data) {
      uni.setClipboardData({
        data,
        success: () => {
          this.$utils.toast(this.$t('common.copySuc'));
        },
      });
    },
  },
  computed: {
    userInfo() {
      return this.$store.getters['userInfo'];
    },
  },
  watch: {},
  onReachBottom() {},
  onPullDownRefresh() {},
};
</script>
<style lang="scss" scoped>
.color-main {
  color: #f0250e;
}
.page-body {
  width: 100vw;
  overflow: hidden;
  min-height: 100vh;
  background: #f2f2f2;
  .list {
    padding: 20rpx;
    .item {
      margin-bottom: 26rpx;
      .user-head {
        width: 80rpx;
        height: 80rpx;
        border-radius: 12rpx;
        background: #fff;
      }

      .content {
        max-width: 502rpx;

        .user-nickname {
          color: #8c8c8c;
          font-size: 24rpx;
          margin-bottom: 12rpx;
        }
        .content-value {
          .text-value {
            font-size: 30rpx;
            padding: 20rpx 30rpx;
            border-radius: 0 20rpx 20rpx 20rpx;
            background: #fff;
            max-width: 100%;
          }
          .text-value-1 {
            border-radius: 20rpx 0 20rpx 20rpx;
          }
        }
      }
    }
  }
  .bottom {
    height: calc(100rpx + env(safe-area-inset-bottom));
    .fixed {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100vw;
      height: calc(100rpx + env(safe-area-inset-bottom));
      background: #fff;
      padding: 0 24rpx;
      padding-bottom: env(safe-area-inset-bottom);
      .submit {
        margin-left: 10rpx;
        width: 136rpx;
        line-height: 72rpx;
        background: #f0250e;
        border-radius: 120rpx;
        text-align: center;
        color: #fff;
        font-weight: 600;
        font-size: 28rpx;
      }
    }
  }
  .bottom-icon-list {
    height: 90rpx;
    .fixed {
      position: fixed;
      bottom: calc(100rpx + env(safe-area-inset-bottom));
      left: 0;
      width: 100vw;
      height: 90rpx;
      padding: 0 24rpx;
      display: flex;
      align-items: center;
      .item {
        display: flex;
        align-items: center;
        height: 50rpx;
        font-size: 24rpx;
        padding: 0 20rpx;
        border-radius: 30rpx;
        background: #fff;
        margin-right: 20rpx;
        image {
          width: 30rpx;
          height: 30rpx;
          margin-right: 10rpx;
        }
      }
    }
  }
}
</style>
